<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>项目介绍 · 拓观</title>
    <meta content="" name="description" />
    <meta content="" name="keywords" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="../assets/css/public.css" />
    <link rel="stylesheet" href="../assets/css/projectdetail.css" />
    <!-- <link rel="icon" type="image/x-icon" href="favicon.ico" /> -->
</head>

<body>
    <div data-header="sticky" data-header-top="200" class="projectdetail layout-theme animated-css">
        <!-------------------------- 导航条 Start -------------------------->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="../index.html">
                        <img src="../images/logo_mod-a.png" alt="拓观设计 项目介绍">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class=""><a href="../index.html">首页 <span class="sr-only">(current)</span></a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">拓观故事 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="introduce.html">拓观介绍</a></li>
                                <li><a href="framework.html">拓观框架</a></li>
                                <li><a href="team.html">团队主创</a></li>
                                <li><a href="honor.html">拓观荣誉</a></li>
                                <li><a href="customer.html">拓观客户</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">拓观作品 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li class="active"><a href="project.html?type=1" data-type="1">精品住宅</a></li>
                                <li><a href="project.html?type=2" data-type="2">商业办公</a></li>
                                <li><a href="project.html?type=3" data-type="3">产业园区</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">拓观文化 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="activity.html?type=1">学术</a></li>
                                <li><a href="activity.html?type=2">媒体</a></li>
                                <li><a href="activity.html?type=3">活动</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">招聘·联络 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="value.html">价值分享</a></li>
                                <li><a href="invite.html?type=1">校园招聘</a></li>
                                <li><a href="invite.html?type=2">社会招聘</a></li>
                                <li><a href="contacts.html">联系我们</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-------------------------- 导航条 End -------------------------->
        <!-- 顶部logo 社交联系方式-->
        <div class="container">
            <!-- <div class="back"><a href="project.html">返回列表</a></div> -->
            <div class="row">
                <div class="col-lg-3 col-md-4 col-sm-5 col-xm-3 info">
                    <h6>杭州九里松度假酒店</h6>
                    <ul class="tab clearfix">
                        <li class="active">项目介绍</li>
                        <li>设计说明</li>
                    </ul>
                    <div class="project-info base-info selected">
                        <div class="content">
                            <p>业主：杭州九里松度假酒店有限公司</p>
                            <p> 项目来源： 业主委托</p>
                            <p> 项目情况： 改建</p>
                            <p> 所在地址： 浙江杭州</p>
                            <p> 设计/竣工：2009年/2012年</p>
                            <p> 建筑面积： 5500㎡</p>
                            <p> 景观设计：上海张唐景观设计事务所</p>
                            <p> 室内设计：香港PAL设计事务所有限公司</p>
                            <p> 幕墙设计：广东金刚幕墙工程有限公司</p>
                        </div>
                    </div>
                    <div class="project-info intro-info">
                        <div>
                            <p>基地位于杭州灵隐禅寺景区入口道路的一侧，与北高峰遥遥相望。业主的期望是将原有砖混结构建筑改建为具有中国传统意味的当代商务酒店。因此设计着重关注的是：整理建筑的空间序列，建立内外空间的使用及视线关系以及建筑外立面的更新。</p>
                            <p> 建筑主入口移到南翼山墙，增设的消防楼梯采用玻璃幕墙内衬木格栅的方式，形成“灯笼”的隐喻。南翼首层加固，形成连续的长厅,连续的挑檐暗示空间的延伸。北侧的餐饮独立入口，以三角形的雨棚衔接了流线和功能多重角度和走向。主要景观要素由草坪和“水镜”，保留的樟树组成。加固的屋顶可成为户外活动空或景观花园。</p>
                            <p> 建筑立面通过不同的表皮材料被梳理成若干简明的形体穿插。简洁、平整、细致的材料组合，赋予建筑一种平静内敛，精致高贵的品质。</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-8 col-sm-7 col-xm-9 img-items">
                    <div class="slider">
                        <div class="show clearfix"><img src="../images/project/SeaViewPark.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/BoYa1898.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/ChengTieXinCheng.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/CreationandInnovationCity.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/FengHuangXiAn.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/LanShanLan.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/LishanYard.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/NanjingEquipmentFactory.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/Qinghuayuan.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/SanJinTan.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/SeaViewPark.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/shanghaixieheng.jpg" alt=" "></div>
                        <div class="clearfix"><img src="../images/project/suzhouxuhui.jpg" alt=" "></div>
                        <p class="left"><span><i></i></span></p>
                        <p class="right"><span><i></i></span></p>
                    </div>
                    <div class="list-num-wapper">
                        <ul class="list-num">
                            <li class="active"><img src="../images/project/SeaViewPark.jpg" alt=" "></li>
                            <li><img src="../images/project/BoYa1898.jpg" alt=" "></li>
                            <li><img src="../images/project/ChengTieXinCheng.jpg" alt=" "></li>
                            <li><img src="../images/project/CreationandInnovationCity.jpg" alt=" "></li>
                            <li><img src="../images/project/FengHuangXiAn.jpg" alt=" "></li>
                            <li><img src="../images/project/LanShanLan.jpg" alt=" "></li>
                            <li><img src="../images/project/LishanYard.jpg" alt=" "></li>
                            <li><img src="../images/project/NanjingEquipmentFactory.jpg" alt=" "></li>
                            <li><img src="../images/project/Qinghuayuan.jpg" alt=" "></li>
                            <li><img src="../images/project/SanJinTan.jpg" alt=" "></li>
                            <li><img src="../images/project/SeaViewPark.jpg" alt=" "></li>
                            <li><img src="../images/project/shanghaixieheng.jpg" alt=" "></li>
                            <li><img src="../images/project/suzhouxuhui.jpg" alt=" "></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--页脚-->

        <div class="weixin-bg" onmousedown="removeWeixin()"></div>
        <div class="weixin-wapper">
            <img src="../images/wx.png" alt="微信 weixin" />
        </div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="../assets/js/footer.js"></script>
    <script>
        $(function () {
            var width = $(".list-num>li").width() + 30
            var length = $(".list-num>li").length
            $(".list-num").width(width * length + "px")
            $(".slider").css('height', $(".slider>div").height() + 'px')

            $(".tab>li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".project-info").eq($(this).index()).addClass("selected").siblings().removeClass(
                    "selected");
            })
            $(".list-num>li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".slider>div").removeClass("show").eq($(this).index()).fadeIn().addClass("show").siblings("div")
                    .fadeOut();
            })

            $(".slider>p.left span").click(function () {
                var length = $(".slider>div").length - 1;
                var index = $(".slider>div.show").index();
                var showIndex = index;
                    showIndex--;
                if (index === 0) {
                    showIndex = length;
                }
                console.log(showIndex)
                $(".slider>div").fadeOut().removeClass("show");
                $($(".slider>div")[showIndex]).fadeIn().addClass("show").siblings("div").fadeOut();
                $($(".list-num>li")[showIndex]).addClass("active").siblings().removeClass("active");
            });
            $(".slider>p.right span").click(function () {
                var length = $(".slider>div").length - 1;
                var index = $(".slider>div.show").index();
                var showIndex = index;
                showIndex ++;
                if (index === length) {
                    showIndex = 0;
                }
                console.log(showIndex)
                $(".slider>div").fadeOut().removeClass("show");
                $($(".slider>div")[showIndex]).fadeIn().addClass("show").siblings("div").fadeOut();
                $($(".list-num>li")[showIndex]).addClass("active").siblings().removeClass("active");
            });

        })
    </script>
    <!-- 页脚部分 Start -->
    <div class="footer">
        <div class="footer-wrap">
            <div class="copy">COPYRIGHT &copy; 2017 TUOGUAN COPYRIGTHS RESERVED</div>
            <div class="quick">
                <a href="http://www.miibeian.gov.cn/" target="_blank">浙ICP备11004507号-1</a> &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="contacts.html">联系我们</a> &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:showWeixin()" class="weixin">微信公众号</a>
            </div>
        </div>
    </div>
    <!-- 页脚部分 End -->
</body>

</html>